<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="" placeholder="输入单身狗姓名"><br>
    <button>点击获取单身狗照片</button>
    <img src="" alt="">
    <script>
        const button=document.querySelector("button")
        const img=document.querySelector("img")
        button.addEventListener("click",()=>{
            fetch("后端url接收数据",{
                method:"POST",
                //把要提交的js对象转换为json格式，可以被服务器识别
                body:JSON.stringify({name: input.valur}),
                headers: {
                    'Content-Type':"application/json"
                    //定义头部类型，让服务器更好识别，并且注明是json格式
                },
            
            })
            .then(response=>{
                if(response.ok){
                    return response.json();
                }
                else{
                    throw new Error("error")
                }
            })
            .then(data=>img.src=data.messaage)
        })//点击按钮的时候就会调用fetch函数，并且向服务器获取照片局部在网页
        里刷新
        
    </script>
</body>
</html>